<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.js"></script><title></title>
<meta name="description" content="" />
<meta name="keywords" content="JQuery Grid Plugin" />
<link href="/javascript/grid/css/default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/webapp.min.js"></script>
<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript" src="/js/mac/pager.js"></script>
<script type="text/javascript" src="/js/mac/grid.js"></script>
<style type="text/css">
.money { text-align: right; }
.demoPanel .viewPort { height: 420px; width: 480px; }
</style>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('full');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<body>
<style stype="text/css">
#head { height: 60px; background-color: #333; }
#head img { float: left; border: none; }
#head .right { float: right; height: 60px; color: #FFF; text-align: right; }
#head .right a { color: #CCC; font-size: 16px; color: #FFF; }
#head .title {
	color: #F93; float: left; height: 60px; line-height: 60px;
	font-size: 40px; font-family: Impact, 'Comic Sans MS';
}
#head a { color: #F93; text-decoration: underline; }
.hr { height: 12px; background: transparent url(/css/images/nm-b.png) repeat-x; }
</style>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
	data-appid="100443511" data-redirecturi="http://www.boarsoft.com" charset="utf-8" data-callback="true"></script>
<script type="text/javascript">
QC.Login({
	btnId: "qqLoginBtn"	//插入按钮的节点id
}); 
</script>
<div id="head">
	<a href="/cn/"><img src="/css/images/logo_s.png" alt="logo of boarsoft.com" /></a>
	<div class="title"><a href="/cn/">boarsoft.com</a></div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://www.jquery.com" target="_blank">JQuery</a>
			|
			<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
			|
			<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
			&nbsp;&nbsp;
		</div>
		<div>
			This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
			Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
		</div>
		<div class="fr" style="background-color: #333; margin: 8px;">
			<span id="qqLoginBtn"></span>
		</div>
	</div>
</div>
<div class="hr"></div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/cn/">Home</a>
		&gt;
		<a href="/cn/javascript">Javascript</a>
		&gt;
		<a href="/cn/javascript/grid">JQuery MagicGrid</a>
		&gt;
			</div>
	<div id="nav_back">
		<a href="/javascript/grid/doc" target="_blank">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/cn/javascript">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">JQuery MagicGrid 基本功能示例</option>
			<option value="exp">JQuery MagicGrid 可展开式表格示例</option>
			<option value="multiHeaders">JQuery MagicGrid 多行表头示例</option>
			<option value="fixCol">JQuery MagicGrid 固定列的表格示例</option>
			<option value="voucher">JQuery MagicGrid 凭证类型表格示例</option>
			<option value="edit">JQuery MagicGrid Inline 编辑示例</option>
			<option value="keyEvt">JQuery MagicGrid 按键事件插件示例</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle"></h2>
</div>
<div id="demo" class="demoPanel"><style type="text/css">
.fullGrid .head { height: 50px; }
.fullGrid .ybar { margin-top: 50px; }
.fullGrid .th { height: 50px; }
.fullGrid .th .sizer { height: 50px; }
.fullGrid .th[group] { height: 25px; border-left: 0px; }
.fullGrid .foot .td { background-color: #CCCCCC; height: 32px; }
.fullGrid .icon { float: left; margin-top: 2px; }
.money { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var hd1 = $('<div class="tth"></div>');
	var hdt = $('<div style="height: 25px">'
		+ '<div class="title th" style="width: 100%">'
		+ '&nbsp;Account</div></div>').appendTo(hd1);
	var hdb = $('<div style="height: 25px"></div>').appendTo(hd1);
	var vw = $('.view');
	vw.mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		cols : [{
			name: 'no', title : '&nbsp;', width: 20,
			render: function(r, tr){
				var a = $('<span class="icon icon-plus"></span>');
				a.click(function(){
					var yy = vw.find('.ybar>div');
					var pl = tr.exPanel;
					if(a.hasClass('icon-plus')){
						if(pl){
							pl.show();
						}else{
							pl = $('<ul style="background-color: #FFF; margin: 0px;"></ul>');
							//you can load remote content here
							pl.append('<li>' + r.subject + '</li><li>'
								+ r.summary + '</li><li>Debit = '
								+ r.debit + '</li><li>Credit = ' + r.credit + '</li>'
							);
							tr.exPanel = pl.insertAfter(tr);
							$('<div class="clear"></div>').insertBefore(pl);
						}
						yy.height(yy.height() + pl.height());
						a.removeClass('icon-plus').addClass('icon-minus');
					}else{
						pl.hide();
						yy.height(yy.height() - pl.height());
						a.removeClass('icon-minus').addClass('icon-plus');
					}
				});
				return a;
			}
		},{
			field: 'subject', title : 'Subject', width: 140,
		},{
			field: 'account', title : 'account', header: hd1,
			width: 162, isGroup: true
		},{
			field: 'debit', title : 'Debit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.debit)
					return '<div class="money">$'+r.debit + '</div>';
				return '';
			}
		},{
			field: 'credit', title : 'Credit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.credit)
					return '<div class="money">$'+r.credit + '</div>';
				return '';
			}
		},{
			field: 'summary', title : 'Summary', width: 200
		}],
		loader: {
			url: '/javascript/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10
	});
});
</script>
<div class="viewPort demoPanel">
	<div class="view grid fullGrid"></div>
</div></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/javascript/related.php" class="related"></iframe>
<div class="clear" style="height: 8px;"></div>
<div style="text-align: right;">
	Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
	QQ: 7213571&nbsp;&nbsp;MSN: pyh_jerry@163.com&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!--
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24473339-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
	&nbsp;&nbsp;
</div></body>
</html>
